<template>
	<div class="top">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>
				<a href="/Classification">课程管理</a>
			</el-breadcrumb-item>
			<el-breadcrumb-item>
				<a href="/Video">视频管理</a>
			</el-breadcrumb-item>
		</el-breadcrumb>
	</div>

	<div class="middel">
		<el-form :inline="true" :model="queryInfo" class="demo-form-inline">
			<el-form-item label="视频名称">
				<el-input v-model="queryInfo.videoName" placeholder="请输入视频名称" clearable />
			</el-form-item>
			<el-form-item label="所属课程">
				<el-input v-model="queryInfo.courseId" placeholder="请输入所属课程" clearable />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="search">搜索</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="success" @click="openDialog('add')">新增视频</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="danger" @click="batchDelete" :disabled="multipleSelection.length === 0">
					批量删除
				</el-button>
			</el-form-item>
		</el-form>
	</div>

	<div class="content">
		<el-table
			ref="multipleTableRef"
			:data="tableData"
			row-key="id"
			style="width: 100%"
			@selection-change="handleSelectionChange"
			:loading="loading"
			border
			stripe
			class="category-table"
		>
			<el-table-column type="selection" width="55" />
			<el-table-column prop="id" label="视频ID" width="100" align="center" />
			<el-table-column prop="videoName" label="视频名称" min-width="180" align="center" show-overflow-tooltip />
			<el-table-column label="视频图片" width="120">
				<template #default="scope">
					<el-avatar shape="square" size="large" src="scope.row.videoView" />
				</template>
			</el-table-column>
			<el-table-column prop="videoTime" label="视频时长" width="120" align="center" />
			<el-table-column prop="course.courseName" label="所属课程" min-width="150" align="center" show-overflow-tooltip />

			<el-table-column label="操作" width="240" align="center">
				<template #default="scope">
					<div style="display: flex; justify-content: center; gap: 16px;">
						<el-button size="small" type="primary" @click="openDialog('edit', scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="deleteVideo(scope.row.id)">删除</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="queryInfo.pageNum"
			:page-sizes="[5, 10, 15, 20]"
			:page-size="queryInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total"
			style="margin-top: 20px"
		/>
	</div>

	<el-dialog v-model="dialogVisible" :title="dialogTitle" width="500">
		<el-form :model="form" label-width="110px" class="dialog-form">
			<el-form-item label="视频名称" required>
				<el-input v-model="form.videoName" autocomplete="off" maxlength="50" show-word-limit />
			</el-form-item>
			<el-form-item label="视频时长" required>
				<el-input v-model="form.videoTime" autocomplete="off" maxlength="20" show-word-limit />
			</el-form-item>
			<el-form-item label="视频图片">
				<el-upload
					class="avatar-uploader"
					action="http://your-backend-url/upload"
					:show-file-list="false"
					:before-upload="beforeUpload"
					:on-success="handleUploadSuccess"
					:on-error="handleUploadError"
					:data="uploadData"
				>
					<img v-if="form.videoImage" :src="form.videoImage" class="avatar" />
					<el-icon v-else><Plus /></el-icon>
				</el-upload>
			</el-form-item>
			<el-form-item label="课程ID" required>
				<el-input v-model="form.courseId" autocomplete="off" type="number" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitForm">确定</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { getCurrentInstance, onMounted, reactive, ref } from 'vue';
import { ElMessage, ElMessageBox, type TableInstance } from 'element-plus';

// 查询参数
const queryInfo = reactive({
	id: '',
	videoName: '',
	courseName: '',
	pageSize: 10,
	pageNum: 1,
    courseId: ''
});

// 表格数据和分页
const tableData = ref([]);
const total = ref(0);
const loading = ref(false);

// 选择相关
const multipleTableRef = ref<TableInstance>();
const multipleSelection = ref<any[]>([]);

const axios = getCurrentInstance().appContext.config.globalProperties.axios;

// 弹窗表单
const dialogVisible = ref(false);
const dialogTitle = ref('新增视频');
let form = reactive({
	id: '',
	videoName: '',
	videoView: '',
	videoTime: '',
	courseName: '',
	courseId: '',
	videoImage: '' // 新增图片字段
});
let dialogMode = 'add';

// 查询列表
const queryDataList = () => {
	loading.value = true;
	axios.get('courseVideo/page', {
		params: queryInfo
	})
	.then((response) => {
		if (response && response.code === 200) {
			tableData.value = response.data.list || [];
			total.value = response.data.total || 0;
			// console.log('tableData.value:',tableData.value);
		} else {
			ElMessage.error(response.message || '查询失败');
		}
	})
	.catch(() => {
		ElMessage.error('网络请求错误，请检查网络连接或服务器状态');
	})
	.finally(() => {
		loading.value = false;
	});
};

onMounted(() => {
	queryDataList();
});

// 搜索
const search = () => {
	queryInfo.pageNum = 1;
	queryDataList();
};

// 分页
const handleSizeChange = (size: number) => {
	queryInfo.pageSize = size;
	queryDataList();
};
const handleCurrentChange = (num: number) => {
	queryInfo.pageNum = num;
	queryDataList();
};

// 选择
const handleSelectionChange = (val: any[]) => {
	multipleSelection.value = val;
};

// 打开弹窗
function openDialog(mode: 'add' | 'edit', row?: any) {
	dialogMode = mode;
	if (mode == 'add') {
		dialogTitle.value = '新增视频';
		form.id = '';
		form.videoName = '';
		form.videoView = '';
		form.videoTime = '';
		form.courseName = '';
		form.courseId = '';
		form.videoImage = ''; // 清空图片字段
	} else if (mode == 'edit' && row) {
		dialogTitle.value = '编辑视频';
		axios.get(`courseVideo/${row.id}`).then((resp: any) => {
			if (resp.code === 200) {
				// form=resp.data
				form.id = resp.data.id;
				form.videoName = resp.data.videoName;
				form.videoView = resp.data.videoView;
				form.videoTime = resp.data.videoTime;
				form.courseName = resp.data.courseName;
				form.courseId = resp.data.courseId;
				console.log(form);
			} else {
				ElMessage.error('请求失败');
			}
		});
		
		
	}
	dialogVisible.value = true;
}

// 上传相关
const uploadData = reactive({}) // 可根据需要传递额外参数

function beforeUpload(file) {
	// 可在此校验文件类型/大小
	return true;
}
function handleUploadSuccess(response) {
	// 假设后端返回图片url为 response.url
	form.videoImage = response.url;
	ElMessage.success('图片上传成功');
}
function handleUploadError() {
	ElMessage.error('图片上传失败');
}

// 新增/编辑提交
function submitForm() {
	if (!form.videoName.trim()) {
		ElMessage.warning('请输入视频名称');
		return;
	}
	// if (!form.courseName.trim()) {
	// 	ElMessage.warning('请输入所属课程');
	// 	return;
	// }
	if (!form.videoTime.trim()) {
		ElMessage.warning('请输入视频时长');
		return;
	}
	if (!form.courseId) {
		ElMessage.warning('请输入课程ID');
		return;
	}
	if (dialogMode === 'add') {
		axios.post('courseVideo', {
			videoName: form.videoName,
			videoView: form.videoView,
			videoTime: form.videoTime,
			courseName: form.courseName,
			courseId: form.courseId,
			videoImage: form.videoImage // 新增图片字段
		}).then((resp: any) => {
			if (resp.code === 200) {
				ElMessage.success('新增成功');
				dialogVisible.value = false;
				queryDataList();
			} else {
				ElMessage.error(resp.message || '新增失败');
			}
		});
	} else if (dialogMode === 'edit') {
		axios.put('courseVideo', {
			id: form.id,
			videoName: form.videoName,
			videoView: form.videoView,
			videoTime: form.videoTime,
			courseName: form.courseName,
			courseId: form.courseId,
			videoImage: form.videoImage // 新增图片字段
		}).then((resp: any) => {
			if (resp.code === 200) {
				ElMessage.success('编辑成功');
				dialogVisible.value = false;
				queryDataList();
			} else {
				ElMessage.error(resp.message || '编辑失败');
			}
		});
	}
}

// 删除
function deleteVideo(id: number) {
	ElMessageBox.confirm('确定要删除该视频吗？', '提示', {
		type: 'warning'
	}).then(() => {
		axios.delete(`courseVideo/${id}`).then((resp: any) => {
			if (resp.code === 200) {
				ElMessage.success('删除成功');
				queryDataList();
			} else {
				ElMessage.error(resp.message || '删除失败');
			}
		});
	});
}

// 批量删除
function batchDelete() {
	if (multipleSelection.value.length === 0) {
		ElMessage.warning('请选择要删除的视频');
		return;
	}
	ElMessageBox.confirm('确定要批量删除选中的视频吗？', '提示', {
		type: 'warning'
	}).then(() => {
		const ids = multipleSelection.value.map((item: any) => item.id);
		axios.delete('courseVideo/batch', { data: { ids } }).then((resp: any) => {
			if (resp.code === 200) {
				ElMessage.success('批量删除成功');
				queryDataList();
			} else {
				ElMessage.error(resp.message || '批量删除失败');
			}
		});
	});
}
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import type { UploadFile } from 'element-plus'

const dialogImageUrl = ref('')
const disabled = ref(false)

const handleRemove = (file: UploadFile) => {
  console.log(file)
}

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

const handleDownload = (file: UploadFile) => {
  console.log(file)
}
</script>

<style scoped>
.top {
	background-color: #f8f9fa;
	padding: 12px 20px;
	margin-bottom: 15px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.el-breadcrumb {
	max-width: 1200px;
	margin: 0 auto;
}
.middel {
	background: #fff;
	padding: 20px;
	margin-bottom: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.demo-form-inline {
	display: flex;
	align-items: center;
	gap: 15px;
}
.demo-form-inline .el-form-item {
	margin-right: 20px;
}
.demo-form-inline .el-input,
.demo-form-inline .el-select {
	width: 220px;
}
.el-button {
	min-width: 100px;
}
.el-button + .el-button {
	margin-left: 10px;
}
.content {
	background: #fff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.category-table {
	background: #fff;
	border-radius: 8px;
}
.el-table {
	margin-bottom: 20px;
}
.el-table__header-wrapper {
	border-radius: 6px 6px 0 0;
}
.el-table__body-wrapper {
	border-radius: 0 0 6px 6px;
}
.el-pagination {
	display: flex;
	justify-content: flex-end;
	margin-top: 30px !important;
}
.dialog-form {
	padding-top: 10px;
}
.avatar-uploader .avatar {
	width: 100px;
	height: 100px;
	display: block;
}
</style>